<template>
  <el-table :data="tableData" style="width: 100%" max-height="600">
    <el-table-column prop="employeeId" label="Employee ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="position" label="Position"></el-table-column>
    <el-table-column fixed="right" label="Operations" width="220">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row.employeeId)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加项目按钮 -->
  <el-button class="mt-4" style="width: 100%" @click="openAddItemDialog">Add Item</el-button>

  <!-- 添加项目对话框 -->
  <el-dialog
      v-model="addItemDialogVisible"
      title="Add Item"
      append-to-body
      @close="resetAddItemForm"
  >
    <el-form :model="addItemForm" ref="addItemForm" :rules="addItemFormRules" label-width="120px">
      <el-form-item label="Employee ID" prop="employeeId">
        <el-input  v-model="employeeId"></el-input>
      </el-form-item>
      <el-form-item label="Name" prop="name">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="Position" prop="position">
        <el-input v-model="position"></el-input>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="dialog-footer">
      <el-button @click="addItemDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="addItem">Add</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PersonnelControllerService } from "../../generated";
const name=ref();
const employeeId=ref();
const position=ref();
interface ListItem {
  employeeId: string;
  name: string;
  position: string;
}

// 声明响应式引用
const tableData = ref<ListItem[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const deleteRow = (employeeId: string) => {
  // 根据员工 ID 删除行的逻辑
  PersonnelControllerService.removeUsingPost2(employeeId);
  fetchData();
};
// 添加项目对话框相关状态和方法
const addItemDialogVisible = ref(false);
const addItemForm = ref({
  employeeId: employeeId.value,
  name: name.value,
  position: position.value,
});
const addItemFormRules = ref({
  employeeId: [{ required: true, message: 'Please enter employee ID', }],
  name: [{ required: true, message: 'Please enter name',  }],
  position: [{ required: true, message: 'Please enter position',  }],
});
// 分页变化时的处理方法
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchData();
};

// 获取数据的方法
const fetchData = () => {
  PersonnelControllerService.listUsingPost2(currentPage.value, pageSize.value)
      .then(response => {
        const responseData = response.result;
        tableData.value = responseData.list
        total.value = response.total;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
};

// 页面加载时获取第一页数据
fetchData();

// 打开添加项目对话框
const openAddItemDialog = () => {
  addItemDialogVisible.value = true;
};

// 添加项目
const addItem = () => {
  // 假设这里是发送请求将数据添加到后端的逻辑
  // 此处只是示例，实际情况需要根据你的业务需求来实现
  addItemForm.value = {
    employeeId: employeeId.value,
    name: name.value,
    position: position.value,
  };
  console.log('Adding item:', addItemForm.value);
  // 添加完毕后关闭对话框
  PersonnelControllerService.addUsingPost2(addItemForm.value)
      .then(() => {
        fetchData(); // 添加后刷新数据
        addItemDialogVisible.value = false;
        resetAddItemForm()

      })
      .catch(error => {
        console.error('Error adding item:', error);
      });
};

// 重置添加项目表单
const resetAddItemForm = () => {
  // 重置表单数据
  addItemForm.value = {
    employeeId: '',
    name: '',
    position: '',
  };
};

</script>

<style scoped>
</style>
